<template>
  <div>
    <Form ref="form" :model="formItem" :rules="formItemRules" :label-width="135">
      <FormItem label="ApiKey">
        <Input disabled v-model="formItem.apiKey" placeholder="请输入内容"></Input>
      </FormItem>
      <FormItem label="SecretKey">
        <Input disabled v-model="formItem.secretKey" placeholder="请输入内容"></Input>
      </FormItem>
      <FormItem label="授权类型" prop="grantTypes">
        <CheckboxGroup v-model="formItem.grantTypes">
          <Tooltip :content="item.desc" v-for="item in selectGrantTypes">
            <Checkbox :label="item.label"><span>{{ item.title }}</span></Checkbox>
          </Tooltip>
        </CheckboxGroup>
      </FormItem>
      <FormItem label="用户授权范围" prop="scopes">
        <span slot="label">用户授权范围
          <Tooltip content="提醒用户确认授权可访问的资源">
            <Icon type="ios-alert" size="16"/>
          </Tooltip>
        </span>
        <CheckboxGroup v-model="formItem.scopes">
          <Checkbox v-for="item in selectScopes" :label="item.label"><span>{{ item.title }}</span>
          </Checkbox>
        </CheckboxGroup>
      </FormItem>
      <FormItem label="自动授权范围">
        <span slot="label">自动授权范围
          <Tooltip content="不再提醒用户确认授权可访问的资源">
            <Icon type="ios-alert" size="16"/>
          </Tooltip>
        </span>
        <CheckboxGroup v-model="formItem.autoApproveScopes">
          <Checkbox v-for="item in selectScopes" :label="item.label"><span>{{ item.title }}</span>
          </Checkbox>
        </CheckboxGroup>
      </FormItem>
      <FormItem label="令牌有效期" prop="accessTokenValidity">
        <RadioGroup v-model="formItem.tokenValidity" type="button">
          <Radio label="1">设置有效期</Radio>
          <Radio label="0">不限制</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem v-show="formItem.tokenValidity === '1'" label="访问令牌有效期" prop="accessTokenValidity">
        <InputNumber :min="900" v-model="formItem.accessTokenValidity"></InputNumber>
        <span><span style="margin-left: 5px"></span>秒</span>
      </FormItem>
      <FormItem v-show="formItem.tokenValidity === '1'" label="刷新令牌有效期" prop="refreshTokenValidity">
        <InputNumber :min="900" v-model="formItem.refreshTokenValidity"></InputNumber>
        <span><span style="margin-left: 5px"></span>秒</span>
      </FormItem>
      <FormItem label="第三方登陆回调地址" prop="redirectUrls">
        <Input
          v-model="formItem.redirectUrls"
          type="textarea"
          placeholder="http://localhost:2222/oauth/callback"></Input>
        <span>多个地址使用,逗号隔开</span>
      </FormItem>
    </Form>
  </div>
</template>

<script>
export default {
  name: 'AppClient',
  data () {
    return {
      selectGrantTypes: [
        { label: 'authorization_code', title: '授权码模式', desc: 'Web服务端应用与第三方移动App应用' },
        { label: 'client_credentials', title: '客户端模式', desc: '没有用户参与的,内部服务端与第三方服务端' },
        { label: 'password', title: '密码模式', desc: '内部Web网页应用与内部移动App应用' },
        { label: 'implicit', title: '简化模式', desc: 'Web网页应用或第三方移动App应用' },
        { label: 'refresh_token', title: '刷新令牌', desc: '刷新并延迟访问令牌时长' }
      ],
      selectScopes: [
        { label: 'userProfile', title: '允许访问基本信息' },
        // 这是测试数据,自定义对应接口权限编码
        { label: 'api1', title: '允许访问....自定义信息' }
      ],
      formItemRules: {
        redirectUrls: [
          { required: true, message: '授权重定向地址不能为空', trigger: 'blur' }
        ],
        grantTypes: [
          { required: true, type: 'array', min: 1, message: '授权类型不能为空', trigger: 'blur' }
        ],
        scopes: [
          { required: true, type: 'array', min: 1, message: '用户授权范围不能为空', trigger: 'blur' }
        ],
        accessTokenValidity: [
          { required: true, type: 'integer', min: 900, message: '访问令牌有效期不能少于900', trigger: 'blur' }
        ],
        refreshTokenValidity: [
          { required: true, type: 'integer', min: 900, message: '刷新令牌有效期不能少于900', trigger: 'blur' }
        ]
      },
      formItem: this.getFormItem()
    }
  },
  methods: {
    getFormItem () {
      return {
        appId: '',
        apiKey: '',
        secretKey: '',
        redirectUrls: '',
        scopes: ['userProfile'],
        autoApproveScopes: [],
        grantTypes: [],
        accessTokenValidity: 43200,
        refreshTokenValidity: 2592000,
        tokenValidity: '1'
      }
    },
    setData (data) {
      if (data && data.appId) {
        this.formItem = Object.assign({}, this.formItem, data)
        this.handleLoadAppClientInfo(this.formItem.apiKey)
      }
    },
    handleSubmit () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const data = Object.assign({}, this.formItem)
          data.grantTypes = data.grantTypes.join(',')
          data.scopes = data.scopes.join(',')
          data.autoApproveScopes = data.autoApproveScopes.join(',')
          if (data.tokenValidity === '0') {
            data.accessTokenValidity = -1
            data.refreshTokenValidity = -1
          }
          this.$http.post(this.$apis.app.updateClient, data, this).then(res => {
            this.$bus.emit('closeModal')
          })
        }
      })
    },
    handleLoadAppClientInfo (apiKey) {
      if (!apiKey) {
        return
      }
      this.$http.get(this.$apis.app.getClient(apiKey), {}, this).then(res => {
        const data = res.data
        this.formItem.scopes = data.scope ? data.scope : []
        this.formItem.redirectUrls = data.redirect_uri ? data.redirect_uri.join(',') : ''
        this.formItem.grantTypes = data.authorized_grant_types ? data.authorized_grant_types : []
        this.formItem.accessTokenValidity = data.access_token_validity
        this.formItem.refreshTokenValidity = data.refresh_token_validity
        this.formItem.autoApproveScopes = data.autoapprove ? data.autoapprove : []
        this.formItem.tokenValidity = this.formItem.accessTokenValidity === -1 ? '0' : '1'
      })
    }
  },
  mounted: function () {
  }
}
</script>
